import QtQuick
import QtQuick.Controls

Window {
    width: 640
    height: 480
    visible: true
    title: qsTr("分组ComboBox")

    ComboBox {
        id: comboBox
        width: 250
        height: 30
        anchors.centerIn: parent

        // 优化后的模型结构 - 统一使用display属性，用isGroup标记分组项
        model: [
            { display: "水果", isGroup: true },
            { display: "苹果", isGroup: false },
            { display: "香蕉", isGroup: false },
            { display: "蔬菜", isGroup: true },
            { display: "胡萝卜", isGroup: false },
            { display: "西红柿", isGroup: false }
        ]

        // 当前显示文本
        displayText: currentIndex >= 0 ? model[currentIndex].display : "请选择"

        // 初始不选择任何项
        currentIndex: -1

        // 优化后的委托实现
        delegate: ItemDelegate {
            width: parent.width
            height: modelData.isGroup ? 30 : implicitHeight  // 分组标题高度较小
            enabled: !modelData.isGroup  // 分组项不可选择
            highlighted: comboBox.highlightedIndex === index && !modelData.isGroup

            contentItem: Text {
                text: modelData.display
                font.bold: modelData.isGroup
                color: modelData.isGroup ? "#999999" : (highlighted ? "#666666" : "#333333")
                leftPadding: modelData.isGroup ? 10 : 20  // 分组项缩进较少
            }

            // 分组项的背景色
            background: Rectangle {
                color: modelData.isGroup ? "#f0f0f0" : "#ffffff"
                radius: 2
            }

            // 处理点击事件，跳过分组项
            onClicked: {
                if (!modelData.isGroup) {
                    comboBox.currentIndex = index
                    comboBox.popup.close()
                }
            }
        }

        // 下拉框弹出时的样式调整
        popup: Popup {
            y: comboBox.height
            width: comboBox.width
            implicitHeight: contentItem.implicitHeight
            padding: 1

            contentItem: ListView {
                clip: true
                implicitHeight: contentHeight
                model: comboBox.popup.visible ? comboBox.delegateModel : null
                currentIndex: comboBox.highlightedIndex

                // 添加分组分隔线
                section {
                    property: "isGroup"
                    criteria: ViewSection.FullString
                    delegate: Rectangle {
                        width: parent.width
                        height: 1
                        color: "#eeeeee"
                        visible: section !== "true"  // 只在分组之间显示分隔线
                    }
                }
            }
        }
    }
}
